<html>
	<head>
		<title>Persevere Examples</title>
		<script src="js/persevere.js"></script> <!-- include the persistence framework -->
		<link rel="stylesheet" type="text/css" href="examples/examples.css"/>
	</head>
	<body>
		<h1>Persevere Examples</h1>
		These examples are intended to demonstrate how to use Persevere without compilation. Lazy loading and saving are 
		performed with explicit API calls. These examples should work as is
		if you have download and installed <a href="http://www.xucia.com/page/Jsponic">Jsponic server</a>.

		<h1>Customers Example</h1>
		<a href="#" onclick="renderCustomers()">List Customers</a>
		<div id="customersDiv"></div> <!-- we render the customers in this div -->
		<div id="customerFields" style="display:none">
			<fieldset>
				<legend>Edit the customer</legend>
				<div><label for="firstName">First Name:</label><input type="text" name="firstName" /></div>
				<div><label for="lastName">Last Name:</label><input type="text" name="lastName" /></div>
				<div><label for="address">Address:</label><input type="text" name="address" /></div>
				<div><label for="phoneNumber">Phone Number:</label><input type="text" name="phoneNumber" /></div>
				<div><label for="comment">Comment:</label><input type="text" name="comment" /></div>
				<button id="customerOk">OK</button>
				<button id="customerDelete">Delete</button>
			</fieldset>
		</div>
		<button onclick="addCustomer()">Add new customer</button>
		<script src="examples/customers-api.js"></script> <!-- We can use a standard script declaration since there is no pre-processing -->

		<h1>Blog Example</h1>
		<a href="#" onclick="renderBlog()">Display Blog Posts</a>
		<div id="blogDiv"></div> <!-- we render the blog in this div -->
		<div id="newComment" style="display:none">
			<h3>Enter a new comment</h3>
			<div>
				Author:<input type="text" id="newCommentAuthor" />
			</div>
			<div>
				Comment:<textarea id="newCommentContent"></textarea>
			</div>
			<button onclick="addCommentEntry()">Submit Comment</button>
		</div>
		<a href="#" onclick="var style = document.getElementById('newPost').style; style.display=style.display=='block'?'none':'block'">New Post</a>
		<div id="newPost" style="display:none">
			<h3>Enter a new post</h3>
			<div>
				Content:<textarea id="newPostContent">new post</textarea>
			</div>
			<button onclick="addBlogPost()">Post</button>
		</div>
		<script src="examples/blog-api.js"></script> <!-- We can use a standard script declaration since there is no pre-processing -->

		
	</body>
</html>